<template>
    <div class="forum" v-loading="loading">
        <div class="forum-box">
            <div class="forum-item" v-for="item in forumList" :key="item.id" @click="showDetail(item)">
                <div class="item-left">
                    <h2>{{ item.title }}</h2>
                    <p>{{ item.detail }}</p>
                    <span class="updateTime">最后更新时间：{{ item.updateTime }}</span>
                </div>
                <div class="item-right">
                    <div class="user">
                        <img class="image" :src="`/src/assets/images/user/${item.image}.webp`">
                        <span class="nickname">{{ item.nickname }}</span>
                    </div>
                    <div class="forum-num">
                        <span class=" iconfont"
                            :class="user.userlike.invIds.includes(item.id) ? 'icon-dianzan_kuai' : ' icon-dianzan'"></span>
                        <span class="like-num">{{ item.likes }}</span>
                    </div>
                </div>
            </div>
            <PagingVue v-if="pageInfo.total > 10" :totalPages="pageInfo.totalPage" :pagingMethod="getdata" />
        </div>
        <div class="publish" title="发布帖子" @click="showDialog">
            <span class="iconfont icon-fabu"></span>
        </div>
        <publishVue ref="publish" @refresh="getdata" />
        <detailVue ref="detail" :info="hoverForum" />
    </div>
</template>

<script setup lang="ts">
import PagingVue from "@/components/Paging.vue";
import { ref, reactive } from "vue";
import publishVue from "./publish.vue";
import { ElMessage } from 'element-plus'
import { getPage } from '@/api/invitation'
import checkToken from '@/utils/token'
import detailVue from "./detail.vue";
import { useUserStore } from "@/store";
import { removelike, like } from "@/api/article";

const publish: any = ref(null);
const detail: any = ref(null);
const loading = ref(false)
const user: any = useUserStore()

const showDialog = () => {
    checkToken(() => {
        publish.value.emitShow();
    })
}
const hoverForum = ref({})

// 展示帖子详情页
const showDetail = (item: any) => {
    detail.value.emitShow();
    hoverForum.value = item
}
const pageInfo = reactive({
    limit: 10,
    page: 1,
    total: 0,
    totalPage: 0
})

type forum = {
    id: number;
    title: string;
    detail: string;
    updateTime: string;
    nickname: string;
    likes: string;
    image: string;
};
const forumList = ref([] as forum[])
// 获取数据
const getdata = (page?: number) => {
    loading.value = true;
    if (page) pageInfo.page = page;
    const params = {
        limit: pageInfo.limit,
        page: pageInfo.page
    }
    getPage(params).then((res: any) => {
        if (res.code !== 200) return ElMessage.error('获取帖子列表失败！！')
        const { data } = res;
        pageInfo.totalPage = data.totalPage;
        pageInfo.total = data.total;
        forumList.value = data.data
    }).finally(() => {
        loading.value = false;
    })
}
getdata()
</script>

<style scoped lang="scss">
.forum {
    width: 90%;
    margin: 5px auto;
    position: relative;
    background-color: #fff;
    height: 900px;
    overflow-y: auto;
    scrollbar-width: none;

    /* Firefox */
    &::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }
}

.forum-box {
    overflow: hidden;

    .forum-item {
        width: 80%;
        margin: 20px auto;
        padding: 35px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all .3s;
        cursor: pointer;

        &:hover {
            transform: translateY(-5px);
        }

        .item-left {
            width: 60%;
            position: relative;

            .updateTime {
                position: absolute;
                bottom: -30px;
                left: 0px;
                font-size: 16px;
                color: #ccc;
            }

            h2 {
                font-size: 30px;
                margin-bottom: 10px;
            }

            p {
                line-height: 20px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden; //溢出内容隐藏
                text-overflow: ellipsis; //文本溢出部分用省略号表示
                display: -webkit-box; //特别显示模式
                -webkit-line-clamp: 3; //行数
                line-clamp: 3;
                -webkit-box-orient: vertical; //盒子中内容竖直排列
            }
        }

        .item-right {
            .user {
                .image {
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    border: 4px solid #333;
                }

                .nickname {
                    display: block;
                    width: 100px;
                    text-align: center;
                    font-size: 20px;
                    padding: 10px 0;
                }
            }

            .forum-num {
                font-size: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #666;

                .iconfont {
                    font-size: 26px;

                    &.like {
                        color: rgb(255, 204, 0);
                    }

                    &:hover {
                        color: #000;
                    }
                }

                .like-num {
                    margin-right: 20px;
                }
            }
        }
    }
}

.publish {
    position: fixed;
    right: 115px;
    bottom: 100px;
    width: 80px;
    height: 80px;
    background-color: rgb(255, 204, 0);
    border-radius: 50%;
    text-align: center;
    line-height: 80px;
    transition: all .3s;

    &:hover {
        width: 100px;
        height: 100px;
        line-height: 100px;

        .iconfont {
            font-size: 50px;
        }
    }

    cursor: pointer;

    .iconfont {
        font-size: 46px;
        color: white;
    }
}
</style>